<template>
	<view class="content-res-detail" v-if="!loading">
		<!-- <view class="header-section">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<uni-icons type="left" size="20" color="#fff"></uni-icons>
					<text>返回</text>
				</view>
				<view class="nav-title">预约详情</view>
			</view>
		</view> -->
		
		<view class="detail-container">
			<compResListItem class="sys-head" :item="sysData" :isDetail="true"></compResListItem>
			<compResDetailHead class="head" :item="sbData">
			</compResDetailHead>
			<compResDetailCalender @changeDate="changeDate" class="calender" :confirmDate="confirmDate">
			</compResDetailCalender>
			<compResDetailTime ref="timeCompRef" class="time" :item="sbData" @selectTime="selectTime" :confirmDate="confirmDate">
			</compResDetailTime>

			<view class="btn-res-detail-container">
				<uv-button type="primary" size="large" text="确认预约" @click="reservation" color="#2196f3"
					:customStyle="{ borderRadius: '8px', boxShadow: '0 5px 15px rgba(33, 150, 243, 0.3)' }"></uv-button>
			</view>
		</view>
		
		<!-- 背景动画元素 -->
		<view class="circle circle-1"></view>
		<view class="circle circle-2"></view>
		<view class="circle circle-3"></view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import db from '@/api/database'
import compResDetailHead from '@/pages/reservationDetail/comps/comp-res-detail-head.vue'
import compResDetailCalender from '@/pages/reservationDetail/comps/comp-res-detail-calendar.vue'
import compResDetailTime from '@/pages/reservationDetail/comps/comp-res-detail-time.vue'
import compResListItem from '@/pages/reservation/comps/comp-res-list-item.vue'

onLoad((options) => {
	fetchData(options.id)
})

const loading = ref(false)
const timeCompRef = ref()
const sbData = ref()
const sysData = ref()
const confirmDate = ref({ year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate() })
const selectedTime = ref()

async function fetchData(sbId) {
	try {
		loading.value = true
		const res = await db.collection('sblb').doc(sbId).get()
		sbData.value = res.data[0]
		const sysRes = await db.collection('syslb').doc(sbData.value.sysID).get()
		sysData.value = sysRes.data[0]
		loading.value = false
	} catch (error) {
		console.error('查询数据失败:', error)
	}
}

function changeDate(date) {
	confirmDate.value = date
	nextTick(() => {
		timeCompRef.value.getYysd()
	})
}

function reservation() {
	if (!selectedTime.value || selectedTime.value.length === 0) {
		uni.showToast({
			title: '请选择预约时间',
			icon: 'none'
		})
		return
	}
	
	db.collection('yyjl').add({
		personName: uni.getStorageSync('user').name, // 预约人姓名
		personID: uni.getStorageSync('user')._id, // 预约人ID
		stauts: '已预约', // 预约状态
		time: selectedTime.value,
		date: `${confirmDate.value.year}-${String(confirmDate.value.month).padStart(2,'0')}-${String(confirmDate.value.day).padStart(2,'0')}`, // 预约日期
		sysName: sysData.value.name, // 实验室名称
		sysID: sbData.value.sysID, // 实验室ID
		sbName: sbData.value.name, // 设备名称
		sbID: sbData.value._id // 设备ID
	}).then(res => {
		uni.showToast({
			title: '预约成功',
			icon: 'success'
		})
		uni.navigateTo({
			url: '/pages/reservationHistory/reservationHistory'
		})
	}).catch(err => {
		uni.showToast({
			title: '预约失败',
			icon: 'error'
		})
	})
}

function selectTime(time) {
	selectedTime.value = time
}

function goBack() {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

/* 关键帧动画定义 */
@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.05);
		opacity: 0.6;
	}

	100% {
		transform: scale(1);
		opacity: 0.8;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.content-res-detail {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(135deg, #ffffff 0%, #d1d6dd 100%);
	position: relative;
	overflow: hidden;
	animation: fadeIn 0.8s ease-out;
	
	.header-section {
		width: 100%;
		background: linear-gradient(135deg, #22c4ff, #2196f3);
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
		padding: 10px 0;
		z-index: 2;
		
		.nav-bar {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			margin-top: 20px;
			
			.nav-left {
				display: flex;
				align-items: center;
				color: #fff;
				
				text {
					margin-left: 5px;
					font-size: 16px;
				}
			}
			
			.nav-title {
				flex: 1;
				text-align: center;
				color: #fff;
				font-size: 18px;
				font-weight: 500;
				margin-right: 30px;
			}
		}
	}
	
	.detail-container {
		width: 90%;
		padding: 15px 0;
		z-index: 1;
		
		.sys-head, .head, .calender, .time {
			margin-bottom: 15px;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			animation: fadeIn 0.5s ease-out;
		}
		
		.btn-res-detail-container {
			margin-top: 20px;
			animation: fadeIn 0.5s ease-out;
		}
	}
}

/* 背景动画圆圈 */
.circle {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(45deg, rgba(34, 196, 255, 0.2), rgba(33, 150, 243, 0.2));
	filter: blur(5px);
	z-index: 0;
}

.circle-1 {
	width: 500rpx;
	height: 500rpx;
	top: -150rpx;
	right: -100rpx;
	animation: pulse 8s infinite ease-in-out;
}

.circle-2 {
	width: 350rpx;
	height: 350rpx;
	bottom: 100rpx;
	left: -100rpx;
	animation: pulse 6s infinite ease-in-out 1s;
}

.circle-3 {
	width: 600rpx;
	height: 600rpx;
	bottom: -300rpx;
	right: 30%;
	animation: pulse 10s infinite ease-in-out 2s;
}
</style>